<template>
  <div>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, } from 'vue';
import * as echarts from 'echarts';
import { weatherAPI } from '@/apis/sewageplant'
// const props = defineProps<{
//   series: any
// }>()
let data: any = reactive({
  csTP: []
})
const chartContainer = ref<HTMLElement | null>(null);

const getWeather = async () => {
  const res = await weatherAPI()
  res.data.result.data.CS.CS_TP.forEach((i: any, index: any) => {
    data.csTP.push([index, Number(i.VALUE)])
  })
  initChart()
}
getWeather()




const initChart = () => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);
    myChart.setOption({
      grid: {
        top: '20%',
        left: '10%', // 距离左边的距离
        right: '20%', // 距离右边的距离
        bottom: '30%', // 距离底部的距离
        borderColor: 'red',
      },

      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 50
        },
        {
          start: 0,
          borderColor: 'rgba(204, 204, 204,0.2)',
          end: 50
        }
      ],
      xAxis: {
        min: 0,
        boundaryGap: false,
        name: 'Flow',  // 在这里设置单位
        nameLocation: 'end',  // 将单位放在轴线末尾
        nameTextStyle: {
          color: '#fff', // 设置单位文本颜色为红色
        },
        axisLine: {
          show: false, // 隐藏 Y 轴的刻度线
        },
        axisLabel: {
          show: false, // 隐藏刻度值
        },
        axisTick: {
          show: false, // 隐藏刻度线
        },
        // 网格线样式设置在yAxis内部
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(204, 204, 204,0.2)',
            type: 'dashed',
          },
        },
      },
      yAxis: {
        boundaryGap: false,
        type: 'value',
        name: 'NH3',  // 在这里设置单位
        nameLocation: 'end',  // 将单位放在轴线末尾
        nameTextStyle: {
          color: '#fff', // 设置单位文本颜色为红色
        },
        axisLine: {
          show: false, // 隐藏 Y 轴的刻度线
        },
        axisLabel: {
          show: false, // 隐藏刻度值
        },
        axisTick: {
          show: false, // 隐藏刻度线
        },
        // 网格线样式设置在yAxis内部
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(204, 204, 204,0.2)',
            type: 'dashed',
          },
        },
      },
      series: [
        {
          symbolSize: 8,
          data: data.csTP,
          type: 'scatter',
          lineStyle: {
            color: 'rgb(52, 125, 232)',
          },
        }
      ],
    });

    // 定义数据轮播的变量
    let a = 1;

    // 定义定时器，每2秒切换数据
    setInterval(() => {
    if (a == data.csTP.length - 24) {
      a = 0;
    }
    myChart.dispatchAction({
      type: 'dataZoom',
      startValue: a,
      endValue: a + 24,
    });
    a++;
    }, 2000);
  }
}


onMounted(() => {
  // if (chartContainer.value) {
  //   const myChart = echarts.init(chartContainer.value);
  //   myChart.setOption(option);

  //   // 定义数据轮播的变量
  //   let a = 1;

  //   // 定义定时器，每2秒切换数据
  //   setInterval(() => {
  //     if (a == xData.length - 24) {
  //       a = 0;
  //     }
  //     myChart.dispatchAction({
  //       type: 'dataZoom',
  //       startValue: a,
  //       endValue: a + 24,
  //     });
  //     a++;
  //   }, 2000);
  // }
});
</script>
